<!-- 缴纳账单详情页面 -->
<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-need-pay-container`]">
      <view class="bill-list">
        <view class="bill-item" v-for="(item, index) in bill_list" :key="index">
          <view class="title">{{ `${item.year_month}账单` }}</view>
          <view class="pay-amount"><span class="unit">￥</span>{{ `${item.info.total}` }} </view>
        </view>
      </view>
      <view class="coupon-container" @click="handleCoupon">
        <view class="coupon-title">优惠券</view>
        <view class="coupon-num">
          <span class="num"> {{ `${couponCount}张可用` }}</span>
        </view>
        <view style="display: flex; margin-left: auto">
          <view v-if="discountAmount" class="coupon-amount"><span class="unit">-￥</span>{{ discountAmount }}</view>
          <image class="right-icon" :src="$CDN('/customer/static/images/icons/go-store.png')" />
        </view>
      </view>
      <view class="fixed-wrap">
        <view class="fixed-button">
          <view class="pay-detail">
            <text class="desc">合计付款：￥</text>
            <text class="pay">{{ paymentAmount.toFixed(2) }} </text>
          </view>
          <view class="submit" @click="handlePayment">立即付款</view>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { couponCount, needPayDetail } from './api'
export default {
  name: 'pay-bill',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      bill_list: [],
      couponCount: 0,
      billAmount: 0,
      discountAmount: 0,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
    paymentAmount() {
      if (this.billAmount === 0) return this.billAmount
      return this.billAmount > this.discountAmount ? this.billAmount - this.discountAmount : 0
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  async onLoad(options) {
    await this.getData()
    await this.getCouponCount()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { contract_id, discountAmount } = this.$Route.query
      this.discountAmount = discountAmount || 0
      const { data } = await needPayDetail({ contract_id })
      this.bill_list = data.need_pay_detail.fee_list
      this.billAmount = data.need_pay_detail.total_amount
    },
    async getCouponCount() {
      const { contract_id, belong_type } = this.$Route.query
      const { data } = await couponCount({ contract_id, belong_type })
      this.couponCount = data.usable.count || 0
    },
    handleCoupon() {
      const { couponIds = [] } = this.$Route.query
      if (couponIds.length === 0) {
        this.$ROUTE.go('/pages/subpackage/coupon/my-coupon', { ...this.$Route.query })
      } else {
        uni.navigateBack()
      }
    },
    async handlePayment() {
      const { contract_id, belong_type, project_id, couponIds = [], couponId = [] } = this.$Route.query
      // if (this.paymentAmount === 0) {
      //   const data = await billZreo({ contractId: contract_id, belong_type, couponId, couponIds })
      // }
      this.$ROUTE.go('/pages/payment/index', {
        projectId: project_id,
        scene: 'bill',
        amount: this.paymentAmount.toFixed(2),
        contractId: contract_id,
        belongType: belong_type,
        couponIds,
        couponId,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('need-pay-container')} {
  position: relative;
  background: #f5f5f5;
  overflow: hidden;
  padding: 10px;
  .bill-list {
    display: flex;
    flex-wrap: wrap;
    .bill-item {
      width: 100%;
      border-radius: 5px;
      background: white;
      padding: 15px 8px;
      display: flex;
      align-items: center;
      .title {
        font-size: 12px;
      }
      .pay-amount {
        margin-left: 20px;
        color: #fa2020;
        font-size: 16px;
        .unit {
          font-size: 12px;
        }
      }
    }
  }
  .coupon-container {
    background: white;
    margin-top: 10px;
    // padding: 15px 8px;
    padding: 15px;
    position: relative;
    border-radius: 5px;
    color: #3f9892;
    display: flex;
    &::before {
      position: absolute;
      content: ' ';
      background: #3f9892;
      width: 5px;
      height: 100%;
      left: 0;
      top: 0;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    .coupon-title {
      position: relative;
      padding-right: 15px;
      &::after {
        position: absolute;
        content: ' ';
        background: #f1f1f1;
        width: 2px;
        height: 100%;
        right: 0;
        top: 0;
      }
    }
    .coupon-num {
      margin-left: 10px;
      .num {
        font-weight: bold;
        font-size: 14px;
        line-height: 20px;
      }
    }
    .coupon-amount {
      margin-left: auto;
      margin-right: 5px;
      color: #333333;
      font-size: 14px;
      .unit {
        font-size: 12px;
      }
    }
    .right-icon {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .fixed-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background: #3f9892;
    // background: linear-gradient(to bottom, white, #f5f5f5);
    // padding: 10rpx 0 0 20rpx;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    .fixed-button {
      display: flex;
      .pay-detail {
        display: flex;
        align-items: center;
        width: 70%;
        color: white;
        .desc {
          padding-left: 10px;
          font-size: 10px;
          line-height: 20px;
          padding-top: 5px;
        }
        .pay {
          font-size: 16px;
          line-height: 20px;
        }
      }
      .submit {
        flex: 1;
        padding: 20px 15px;
        color: #3f9892;
        background: white;
        text-align: center;
      }
      ::v-deep .uv-button-wrapper {
        flex: 1;
        margin: 0 15px;
      }
    }
  }
}
</style>
